<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>缺陷类型设置</title>
  <!-- 引入jQuery -->
  <!--    <script src="../../js/jquery-3.4.1.min.js"></script>-->
  <!--    <script src="../../js/jquery.particleground.min.js"></script>-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="../../layui/layui.js"></script>
  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/admin.css" media="all">
  <style>
      * {
          margin: 0;
          padding: 0;
      }

      body {
          height: 100vh;
      }

      .float-right {
          float: right;
      }

      .float-left {
          float: left;
      }

      .inline-block {
          display: inline-block;
      }

      .margin-top {
          margin-top: 20px;
      }
      .isUse,
      .useIssue {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
      }
  </style>
  <script>
    layui.use(['layer', 'table', 'form'], function () {
      var table = layui.table;
      var layer = layui.layer
      var $ = layui.$;
      table.render({
        elem: '#flaw-table',
        url: '/flaw/getType',
        toolbar: '#toolbarDemo',
        cols: [
          [{
            field: 'type_name',
            width: '45%',
            title: '缺陷类型名称',
          },{
              field: 'status',
              title: '状态（启用/不启用）',
              width: '15%',
          },{
              field: 'flawTypeOperate',
              width: '40%',
              title: '操作',
              toolbar: '#flawOperate',
              fixed: 'right'
            }
          ]
        ],
        page: true,
        skin: 'row',
        limit: 5,
      });

      //触发事件
      table.on('tool(test)', function (obj) {
        var data = obj.data;
        console.log(obj)
        if (obj.event === 'del') {
          layer.confirm('是否删除此行', function (index) {
            obj.del();
            layer.close(index);
          });
        } else if (obj.event === 'edit') {
          layer.prompt({
            formType: 2,
            value: data.type_name
          }, function (value, index) {
            obj.update({
              type_name: value
            });
            $.ajax({
              method:"post",
              url:'/flaw/updateTypeById',
              data:{
                id: index,
                status: data.status,
                type_name:data.type_name,
              }
            })
            layer.msg('修改成功')
            layer.close(index);
          });
        }
      });

      $("#add").click(function () {
        layer.open({
          type: 1,
          area: ['500px', '300px'],
          title: '添加缺陷类型',
          content: $('#window'),
          btn: ['确认添加', '取消'],
          btnAlign: 'c',
          shade: 0,
          anim:5,
          success:function (){
            console.log('success')
          },
          //按钮1
          yes: function (index, layero) {
            var addTypeName = $('#name').val();
            var typeStatus = $('input[name="qiyong"]:checked').val();
            console.log(index)
            if ($('#name').val() !== '') {
              // 这里做添加的逻辑
              $('#name').val('') //置空
              $.ajax({
                method: "post",
                url: "/flaw/savaType",
                data: {
                  id:index,
                  status: typeStatus,
                  type_name: addTypeName
                },

              })
              // 重载表格
              table.reload('flaw-table', {
                page: {
                  curr: 1
                }
              })
              layer.msg('修改成功')
              layer.closeAll();
            } else {
              layer.alert('缺陷类型名称不为空')
            }
          },
          btn2: function () {
            console.log('btn2');
            layer.closeAll()
          },
          end: function (){
            console.log('end')
          }
        });
      })
    });
  </script>
</head>

<body class="layui-layout-body">
<script type="text/html" id="flawOperate">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div class="flaw-cnotainer-box">
  <div id="layerDemo" style="margin-bottom: 0;">
    <div class="layui-btn-container margin-top">
      <button class="layui-btn layui-btn-normal add-type float-right " id="add">添加缺陷类型</button>
    </div>
  </div>
  <div class="flaw-table">
    <table class="layui-table" id="flaw-table" lay-filter="test"></table>
  </div>
</div>
<!-- 弹出层script -->

<div class="form-container" id="window" style="display: none">
  <form method="post" class="layuiform" lay-filter="form">
    <div style="padding: 20px 100px;">
      </br>
      <label class="layui-form-label">缺陷名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" placeholder="缺陷类型名" id="name" autocomplete="off" class="layui-input">
      </div>
      <div id="isUse" class="isUse">
        <div id="use" class="margin-top useIssue">
          <label class="layui-form-label ">启用</label>
          <input type="radio" name="qiyong" value="1" title="启用" >
        </div>
        <div id="noUse" class="margin-top useIssue">
          <label class="layui-form-label">不启用</label>
          <input type="radio" name="qiyong" value="0" title="不启用">
        </div>
      </div>
    </div>
  </form>
</div>

</body>


</html>